<template>
  <div class="login-box">
    <div class="box">
      <img class="bg" :src="ban4">
      <div class="container">
        <div class="little-box">
          <div class="cont">
            <el-form ref="form" label-width="70px">
            <el-form-item label="手机号码">
              <el-input v-model="tel" @blur="telyz()"></el-input>
            </el-form-item>
            <el-form-item label="登录密码">
              <el-input type="password" v-model="pass" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码">
              <el-input type="password" v-model="checkPass" auto-complete="off" @blur="passyz()"></el-input>
            </el-form-item>
            <div class="item">
            <el-form-item label="验证码" style="width: 264px;float: left;margin-right: 20px;">
              <el-input type="password" v-model="code" auto-complete="off"></el-input>
            </el-form-item>
            <el-button plain :disabled="disabled" @click="sendcode()">{{btntxt}}</el-button>
            </div>
            <div class="item" style="text-align: center;">
              <el-button type="success" @click="regg()">立即注册</el-button>
            </div>
            <div class="item">
              <!-- <router-link class="forget" to="/forget">忘记密码</router-link> -->
              <router-link class="reg" to="/login" style="float: right;">已有账号？去登录</router-link>
            </div>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ban4 from '@/assets/image/ban4.jpg';
import qs from "qs"
export default {
  name: 'App',
  data(){
    return{
      ban4,
      tel:'',
      pass: '',
      checkPass: '',
      code:'',
      time: 0,
      btntxt:'获取验证码',
      disabled:false
    }
  },
  methods:{
    telyz:function(){
      var reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
      if(this.tel==''){
        this.$message.error('错了哦，手机号不能为空');
      }else if(!reg.test(this.tel)){
        this.$message.error('错了哦，手机号格式不正确');
      }
    },
    passyz:function(){
      if(this.pass == ''){
        this.$message.error('错了哦，密码不能为空');
      }else if(this.pass != this.checkPass){
        this.$message.error('错了哦，输入密码不一致');
      }
    },
    sendcode:function(){
        var reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
                //var url="/nptOfficialWebsite/apply/sendSms?mobile="+this.ruleForm.phone;
        if(this.tel==''){
          this.$message.error('错了哦，手机号不能为空');
        }else if(!reg.test(this.tel)){
          this.$message.error('错了哦，手机号格式不正确');
        }else if(this.pass == ''){
          this.$message.error('错了哦，密码不能为空');
        }else if(this.pass != this.checkPass){
          this.$message.error('错了哦，输入密码不一致');
        }else{
          
          this.$http.get("/index.php/index/Smsverify/ajaxSendTemplateSMS?mode=register&phone="+this.tel)
              .then(res => {
                console.log(res)
                this.time=60;
                this.disabled=true;
                this.timer();
                
              })
              .catch(error => {
                alert("网络错误")
              });
            
                    /*axios.post(url).then(
                        res=>{
                        this.phonedata=res.data;
                    })*/
        }
    },
    timer() {
        if (this.time > 0) {
              this.time--;
              this.btntxt=this.time+"s后重新获取";
              setTimeout(this.timer, 1000);
        } else{
              this.time=0;
              this.btntxt="获取验证码";
              this.disabled=false;
        }
    },

    regg:function(){
      var reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
      if(this.tel==''){
          this.$message.error('错了哦，手机号不能为空');
        }else if(!reg.test(this.tel)){
          this.$message.error('错了哦，手机号格式不正确');
        }else if(this.pass == ''){
          this.$message.error('错了哦，密码不能为空');
        }else if(this.pass != this.checkPass){
          this.$message.error('错了哦，输入密码不一致');
        }else if(this.code == ''){
          this.$message.error('错了哦，请输入验证码');
        }else{
          this.$http.post("/index.php/index/user/register",qs.stringify({
              mobile:this.tel,
              password:this.pass,
              code: this.code
          }))
          .then(res => {
            if(res.data.code==1){
              this.$confirm('注册成功~', '提示', {
                confirmButtonText: '去登录',
                type: 'success'
              }).then(() => {
                this.$router.push({ path: '/login' })
              }).catch(() => {
                          
              });
            }
            if(res.data.code == -2){
              this.$confirm('该号码已被注册，不能重复注册!', '提示', {
                confirmButtonText: '确定',
                type: 'error'
              }).then(() => {
                
              }).catch(() => {
                          
              });
            }
          })
          .catch(error => {

          });
        }
    }
  },
  components:{
    
  },
  computed:{
    
  },
  watch:{
          '$route' (to, from) {
                // this.getinfo()
               //   const toDepth = to.path.split('/').length
                // const fromDepth = from.path.split('/').length
                // this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
                // console.log(to.name)
                if(to.name == 'reg'){
                  this.tel=''
                  this.pass=''
                  this.checkPass=''
                  this.code=''
                }
              }
        }
}
</script>

<style scoped lang="less">
.login-box{
  width: 100%;
  height: auto;
  zoom: 1;
  overflow: hidden;
  .box{
    width: 100%;
    height: 868px;
    position: relative;
  }
  .bg{
    width: 100%;
    height: 868px;
    position: absolute;
    z-index: -1;
  }
  .little-box{
    float: right;
    width: 480px;
    height: auto;
    zoom: 1;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    margin-top: 110px;
    .cont{
      padding: 30px;
      .item{
        width: 100%;
        height: auto;
        zoom: 1;
        overflow: hidden; 
        a{
          padding-top: 16px;
          float: left;
          font-size: 14px;
          color: #494949;
        }
        .reg{
          float: right;
        }
      }
    }
  }
}
</style>
